<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/swiper.min.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
    <script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="__STATIC__/index/js/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=24E6ACE58880d4bf17181b0680863639&s=1"></script>
    <title>一官安</title>
    <script>
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            // alert(JSON.stringify(r.point));
            var gc = new BMap.Geocoder();
            var pointAdd = new BMap.Point(r.point.lng, r.point.lat);
            var lat = r.point.lat;
            var lng = r.point.lng;
            gc.getLocation(pointAdd, function (rs) {
                var city = rs.addressComponents.city;
                var province = rs.addressComponents.province;
                // alert(JSON.stringify(rs.addressComponents));
                $.ajax({
                    url: "",
                    type: 'post',
                    data: {city:city,province:province,lat:lat,lng:lng},
                    success: function (ret) {
                        // alert(JSON.stringify(ret));
                        // console.log(ret);
                        $('#first').html(ret.first);
                        $('#list').html(ret.list);
                    }
                })
            })

        })
    </script>
</head>
<body>
<!--首页-->
<div class="index whiteBg">
    <!--banner-->
    <div class="banner">
        <div class="swiper-container" id="swiper">
            <div class="swiper-wrapper">
                {foreach $slider as $vo}
                <div class="swiper-slide">
                    <img class="auto-img" src="{$vo.thumb}"/>
                </div>
                {/foreach}
            </div>
            <!--分页器-->
            <div class="swiper-pagination"></div>
        </div>
        <!--搜索框-->
        <div class="search-box">
            <label>
                <input type="search" id="search" name="" placeholder="APPLE海珠店" onkeydown="enterSearch(event)"/>
            </label>
        </div>
    </div>

    <!--主体-->
    <div class="content">
        <!--同城最近门店-->
        <div class="nearby">
            <p class="nearby_tit smoth bold">同城最近门店</p>
            <div id="first">

            </div>
        </div>
        <!--同城其他门店-->
        <div class="nearby other_store">
            <p class="nearby_tit smoth bold">同城其他门店</p>
            <div id="list">

            </div>
        </div>
    </div>

    <!--底部tabs-->
    <div class="nav-tabs">
        <ul class="nav-list clear">
            <a href="javascript:;">
                <li>
                    <i class="home-selected"></i>
                    <p class="text-center normall-text on">首页</p>
                </li>
            </a>
            <a href="./shopcart.html">
                <li>
                    <i class="shopcart"></i>
                    <p class="text-center normall-text">购物车</p>
                </li>
            </a>
            <a href="./query_data.html">
                <li>
                    <i class="query"></i>
                    <p class="text-center normall-text">配镜查询</p>
                </li>
            </a>
            <a href="/index/user/index">
                <li>
                    <i class="mine"></i>
                    <p class="text-center normall-text">我的</p>
                </li>
            </a>
        </ul>
    </div>
</div>
<div class="cart_pop">
    <div class="pop_msg">
        <img class="pop_close" src="__STATIC__/index/img/icon-close.png" onclick="hideTips('.cart_pop')"/>
        <p class="text-center super-text smoth bold"></p>
        <div class="pop_btn">
            <button class="cancel" onclick="hideTips('.cart_pop')">取消</button>
            <button class="ensure">确定</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    window.onload = function () {
        var swiper = new Swiper('#swiper', {
            autoplay: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true
            }
        })
    }

    //弹出框
    function showTips(classname) {
        return $(classname).show()
    }

    function hideTips(classname) {
        return $(classname).hide()
    }

    function enterSearch(event) {
        $('#search').bind('search', function () {
            var value = $('#search').val();//输入的关键字的值
            if (event.keyCode == 13) {
                window.location.href = encodeURI('search.html?key=' + value)//跳转页面的关键字
            }
        })
    }
    //绑定门店
    $('.content').on('click','.x-list',function () {

        var id = $(this).data('id');
        var shopname = $(this).data('shopname');
        showTips('.cart_pop');
        $('.cart_pop .pop_msg p').html('确定绑定'+shopname+'吗?');
        //点击确定按钮
        $('.ensure').on('click', function () {
            hideTips('.cart_pop');
            $.ajax({
                url:"bindmid",
                type:"post",
                data:{mid:id},
                success:function (res) {
                    if(res.code=='ok'){
                        layer.open({
                            content:'绑定成功',
                            skin:'msg',
                            time:2,
                            end:function () {
                                window.location.reload();
                            }
                        })
                    }
                }
            })
        })
    })


    $(function () {

    })

</script>
</body>
</html>